React useContext: Context API izmantošanas optimizēšana veiktspējai

React Context API, kas galvenokārt tiek piekļūta, izmantojot useContext āķi, nodrošina jaudīgu mehānismu datu koplietošanai visā jūsu komponentu kokā, neizmantojot rekvizītu manuālu nodošanu katrā līmenī. Lai gan tas piedāvā ievērojamas ērtības, nepareiza lietošana var radīt veiktspējas problēmas, īpaši lielās, sarežģītās lietojumprogrammās. Šis ceļvedis iedziļinās efektīvās stratēģijās Context API izmantošanas optimizēšanai, izmantojot useContext, nodrošinot, ka jūsu React lietojumprogrammas saglabā veiktspēju un mērogojamību.

Potenciālo veiktspējas slazdu izpratne

Pamatproblēma slēpjas tajā, kā useContext izraisa pārrenderēšanu. Kad komponents izmanto useContext, tas abonē izmaiņas noteiktajā kontekstā. Jebkura konteksta vērtības atjaunināšana, neatkarīgi no tā, vai konkrētajam komponentam patiešām ir nepieciešami atjauninātie dati, liks komponentam un visiem tā pēctečiem pārrenderēties. Tas var izraisīt nevajadzīgu pārrenderēšanu, kas noved pie veiktspējas pasliktināšanās, īpaši, strādājot ar bieži atjaunināmiem kontekstiem vai lieliem komponentu kokiem.

Iedomājieties scenāriju, kurā jums ir globāls tēmas konteksts, ko izmanto stila veidošanai. Ja pat neliela, neatbilstoša datu daļa šajā tēmas kontekstā mainās, katrs komponents, kas patērē šo kontekstu, sākot no pogām līdz pat veseliem izkārtojumiem, tiks pārrenderēts. Tas ir neefektīvi un var negatīvi ietekmēt lietotāja pieredzi.

Optimizācijas stratēģijas useContext izmantošanai

Var izmantot vairākas metodes, lai mazinātu useContext ietekmi uz veiktspēju. Mēs izpētīsim šīs stratēģijas, sniedzot praktiskus piemērus un labākās prakses.

1. Granulēta konteksta izveide

Tā vietā, lai visai lietojumprogrammai veidotu vienu, monolītu kontekstu, sadaliet datus mazākos, specifiskākos kontekstos. Tas samazina pārrenderēšanas apjomu. Tikai komponenti, kas tieši atkarīgi no mainītajiem datiem konkrētā kontekstā, tiks ietekmēti.

Piemērs:

Tā vietā, lai viens AppContext saturētu lietotāja datus, tēmas iestatījumus un citu globālo stāvokli, izveidojiet atsevišķus kontekstus:

• UserContext: Lietotāja informācijai (autentifikācijas statuss, lietotāja profils utt.).
• ThemeContext: Tēmas iestatījumiem (krāsas, fonti utt.).
• SettingsContext: Lietojumprogrammas iestatījumiem (valoda, laika josla utt.).

Šī pieeja nodrošina, ka izmaiņas vienā kontekstā neizraisa pārrenderēšanu komponentos, kas balstās uz citiem, nesaistītiem kontekstiem.

2. Memoizācijas metodes: React.memo un useMemo

React.memo: Aptiniet komponentus, kas patērē kontekstu, ar React.memo, lai novērstu pārrenderēšanu, ja rekvizīti nav mainījušies. Tas veic seklu rekvizītu salīdzināšanu, kas nodoti komponentam.

Piemērs:

            import React, { useContext } from 'react';

const ThemeContext = React.createContext({});

function MyComponent(props) {
 const theme = useContext(ThemeContext);
 return <div style={{ color: theme.textColor }}>{props.children}</div>;
}

export default React.memo(MyComponent);

            

              
                Copy
              
            
          

Šajā piemērā MyComponent tiks pārrenderēts tikai tad, ja mainīsies theme.textColor. Tomēr React.memo veic seklu salīdzināšanu, kas var nebūt pietiekama, ja konteksta vērtība ir komplekss objekts, kas tiek bieži mainīts. Šādos gadījumos apsveriet iespēju izmantot useMemo.

useMemo: Izmantojiet useMemo, lai memoizētu atvasinātās vērtības no konteksta. Tas novērš nevajadzīgus aprēķinus un nodrošina, ka komponenti tiek pārrenderēti tikai tad, kad mainās konkrētā vērtība, no kuras tie ir atkarīgi.

Piemērs:

            import React, { useContext, useMemo } from 'react';

const MyContext = React.createContext({});

function MyComponent() {
 const contextValue = useContext(MyContext);

 // Memoize the derived value
 const importantValue = useMemo(() => {
 return contextValue.item1 + contextValue.item2;
 }, [contextValue.item1, contextValue.item2]);

 return <div>{importantValue}</div>;
}

export default MyComponent;

            

              
                Copy
              
            
          

Šeit importantValue tiek pārrēķināta tikai tad, kad mainās contextValue.item1 vai contextValue.item2. Ja citas īpašības uz `contextValue` mainās, `MyComponent` netiks pārrenderēts bez vajadzības.

3. Selektoru funkcijas

Izveidojiet selektoru funkcijas, kas izgūst tikai nepieciešamos datus no konteksta. Tas ļauj komponentiem abonēt tikai konkrētas datu daļas, kas tiem ir nepieciešamas, nevis visu konteksta objektu. Šī stratēģija papildina granulētu konteksta izveidi un memoizāciju.

Piemērs:

            import React, { useContext } from 'react';

const UserContext = React.createContext({});

// Selector function to extract the username
const selectUsername = (userContext) => userContext.username;

function UsernameDisplay() {
 const username = selectUsername(useContext(UserContext));

 return <p>Username: {username}</p>;
}

export default UsernameDisplay;

            

              
                Copy
              
            
          

Šajā piemērā UsernameDisplay tiks pārrenderēts tikai tad, kad mainīsies username īpašība UserContext. Šī pieeja atsaista komponentu no citām īpašībām, kas glabātas `UserContext`.

4. Pielāgoti āķi konteksta izmantošanai

Iekapsulējiet konteksta izmantošanas loģiku pielāgotos āķos. Tas nodrošina tīrāku un atkārtoti izmantojamāku veidu, kā piekļūt konteksta vērtībām un pielietot memoizācijas vai selektoru funkcijas. Tas arī atvieglo testēšanu un uzturēšanu.

Piemērs:

            import React, { useContext, useMemo } from 'react';

const ThemeContext = React.createContext({});

// Custom hook for accessing the theme color
function useThemeColor() {
 const theme = useContext(ThemeContext);

 // Memoize the theme color
 const themeColor = useMemo(() => theme.color, [theme.color]);

 return themeColor;
}

function MyComponent() {
 const themeColor = useThemeColor();

 return <div style={{ color: themeColor }}>Hello, World!</div>;
}

export default MyComponent;

            

              
                Copy
              
            
          

The useThemeColor hook encapsulates the logic for accessing the theme.color and memoizing it. Tas makes it easier to reuse this logic in multiple components and ensures that the component only re-renders when the theme.color changes.

5. Stāvokļa pārvaldības bibliotēkas: Alternatīva pieeja

Sarežģītos stāvokļa pārvaldības scenārijos apsveriet iespēju izmantot specializētas stāvokļa pārvaldības bibliotēkas, piemēram, Redux, Zustand vai Jotai. Šīs bibliotēkas piedāvā uzlabotas funkcijas, piemēram, centralizētu stāvokļa pārvaldību, paredzamus stāvokļa atjauninājumus un optimizētus pārrenderēšanas mehānismus.

• Redux: Nobriedusi un plaši izmantota bibliotēka, kas nodrošina paredzamu stāvokļa konteineru JavaScript lietotnēm. Tā prasa vairāk koda, bet piedāvā izcilus atkļūdošanas rīkus un lielu kopienu.
• Zustand: Neliels, ātrs un mērogojams stāvokļa pārvaldības risinājums, kas izmanto vienkāršotus flux principus. Tā ir pazīstama ar savu lietošanas ērtumu un minimālu kodu.
• Jotai: Primitīva un elastīga stāvokļa pārvaldība React. Tā nodrošina vienkāršu un intuitīvu API globālā stāvokļa pārvaldībai ar minimālu kodu.

Šīs bibliotēkas var būt labāka izvēle sarežģītu lietojumprogrammu stāvokļa pārvaldībai, īpaši, strādājot ar biežiem atjauninājumiem un sarežģītām datu atkarībām. Context API lieliski novērš rekvizītu urbšanu, bet specializēta stāvokļa pārvaldība bieži risina veiktspējas problēmas, kas rodas no globālajām stāvokļa izmaiņām.

6. Nemainīgas datu struktūras

Izmantojot kompleksus objektus kā konteksta vērtības, izmantojiet nemainīgas datu struktūras. Nemainīgas datu struktūras nodrošina, ka izmaiņas objektā rada jaunu objekta instanci, nevis mutē esošo. Tas ļauj React efektīvi noteikt izmaiņas un novērst nevajadzīgu pārrenderēšanu.

Bibliotēkas, piemēram, Immer un Immutable.js, var palīdzēt vieglāk strādāt ar nemainīgām datu struktūrām.

Piemērs, izmantojot Immer:

            import React, { createContext, useState, useContext, useCallback } from 'react';
import { useImmer } from 'use-immer';

const MyContext = createContext();

function MyProvider({ children }) {
 const [state, updateState] = useImmer({
 item1: 'value1',
 item2: 'value2',
 });

 const updateItem1 = useCallback((newValue) => {
 updateState((draft) => {
 draft.item1 = newValue;
 });
 }, [updateState]);

 return (
 <MyContext.Provider value={{ state, updateItem1 }}>
 {children}
 </MyContext.Provider>
 );
}

function MyComponent() {
 const { state, updateItem1 } = useContext(MyContext);

 return (
 <div>
 <p>Item 1: {state.item1}</p>
 <button onClick={() => updateItem1('new value')}>Update Item 1</button>
 </div&n );
}

export { MyContext, MyProvider, MyComponent };

            

              
                Copy
              
            
          

Šajā piemērā useImmer nodrošina, ka stāvokļa atjauninājumi rada jaunu stāvokļa objektu, izraisot pārrenderēšanu tikai tad, kad tas ir nepieciešams.

7. Stāvokļa atjauninājumu partiju apstrāde

React automātiski apstrādā vairākus stāvokļa atjauninājumus vienā pārrenderēšanas ciklā. Tomēr atsevišķās situācijās jums var būt nepieciešams manuāli apstrādāt atjauninājumus partijās. Tas ir īpaši noderīgi, strādājot ar asinhronām operācijām vai vairākiem atjauninājumiem īsā laika periodā.

Jūs varat izmantot ReactDOM.unstable_batchedUpdates (pieejams React 18 un iepriekšējās versijās, un parasti nav nepieciešams ar automātisko partiju apstrādi React 18+), lai manuāli apstrādātu atjauninājumus partijās.

8. Nevajadzīgu konteksta atjauninājumu izvairīšanās

Pārliecinieties, ka konteksta vērtību atjaunojat tikai tad, ja ir faktiskas datu izmaiņas. Izvairieties no konteksta atjaunināšanas ar to pašu vērtību bez vajadzības, jo tas joprojām izraisīs pārrenderēšanu.

Pirms konteksta atjaunināšanas salīdziniet jauno vērtību ar iepriekšējo vērtību, lai pārliecinātos, ka ir atšķirība.

Reālās pasaules piemēri dažādās valstīs

Apskatīsim, kā šīs optimizācijas metodes var pielietot dažādos scenārijos dažādās valstīs:

• E-komercijas platforma (Globāla): E-komercijas platforma izmanto CartContext, lai pārvaldītu lietotāja iepirkumu grozu. Bez optimizācijas katrs lapas komponents varētu pārrenderēties, pievienojot preces grozam. Izmantojot selektoru funkcijas un React.memo, tiek pārrenderēti tikai groza kopsavilkums un saistītie komponenti. Izmantojot bibliotēkas, piemēram, Zustand, var efektīvi centralizēt groza pārvaldību. Tas ir piemērojams globāli, neatkarīgi no reģiona.
• Finanšu informācijas panelis (Amerikas Savienotās Valstis, Apvienotā Karaliste, Vācija): Finanšu informācijas panelis parāda reāllaika akciju cenas un portfeļa informāciju. StockDataContext nodrošina jaunākos akciju datus. Lai novērstu pārmērīgu pārrenderēšanu, useMemo tiek izmantots atvasināto vērtību, piemēram, kopējās portfeļa vērtības, memoizēšanai. Turpmāka optimizācija varētu ietvert selektoru funkciju izmantošanu, lai izgūtu konkrētus datu punktus katrai diagrammai. Noderīgas varētu būt arī tādas bibliotēkas kā Recoil.
• Sociālo mediju lietojumprogramma (Indija, Brazīlija, Indonēzija): Sociālo mediju lietojumprogramma izmanto UserContext, lai pārvaldītu lietotāju autentifikāciju un profila informāciju. Granulēta konteksta izveide tiek izmantota, lai atdalītu lietotāja profila kontekstu no autentifikācijas konteksta. Nemainīgas datu struktūras tiek izmantotas, lai nodrošinātu efektīvu izmaiņu noteikšanu. Bibliotēkas, piemēram, Immer, var vienkāršot stāvokļa atjaunināšanu.
• Ceļojumu rezervēšanas vietne (Japāna, Dienvidkoreja, Ķīna): Ceļojumu rezervēšanas vietne izmanto SearchContext, lai pārvaldītu meklēšanas kritērijus un rezultātus. Pielāgoti āķi tiek izmantoti, lai iekapsulētu loģiku piekļuvei un meklēšanas rezultātu memoizēšanai. Stāvokļa atjauninājumu partiju apstrāde tiek izmantota, lai uzlabotu veiktspēju, vienlaikus lietojot vairākus filtrus.

Praktiski padomi un labākā prakse

• Profilējiet savu lietojumprogrammu: Izmantojiet React DevTools, lai identificētu komponentus, kas bieži tiek pārrenderēti.
• Sāciet ar granulētiem kontekstiem: Sadaliet savu globālo stāvokli mazākos, vieglāk pārvaldāmos kontekstos.
• Stratēģiski pielietojiet memoizāciju: Izmantojiet React.memo un useMemo, lai novērstu nevajadzīgu pārrenderēšanu.
• Izmantojiet selektoru funkcijas: Izgūstiet no konteksta tikai nepieciešamos datus.
• Apsveriet stāvokļa pārvaldības bibliotēkas: Sarežģītai stāvokļa pārvaldībai izpētiet tādas bibliotēkas kā Redux, Zustand vai Jotai.
• Pieņemiet nemainīgas datu struktūras: Izmantojiet bibliotēkas, piemēram, Immer, lai vienkāršotu darbu ar nemainīgiem datiem.
• Uzraugiet un optimizējiet: Nepārtraukti uzraugiet savas lietojumprogrammas veiktspēju un optimizējiet konteksta izmantošanu pēc vajadzības.

Secinājums

React Context API, apdomīgi izmantota un optimizēta ar apspriestajām metodēm, piedāvā jaudīgu un ērtu veidu, kā koplietot datus visā jūsu komponentu kokā. Izprotot potenciālās veiktspējas problēmas un ieviešot atbilstošas optimizācijas stratēģijas, jūs varat nodrošināt, ka jūsu React lietojumprogrammas saglabā veiktspēju, mērogojamību un uzturamību, neatkarīgi no to lieluma vai sarežģītības.

Atcerieties vienmēr profilēt savu lietojumprogrammu un identificēt jomas, kurām nepieciešama optimizācija. Izvēlieties stratēģijas, kas vislabāk atbilst jūsu specifiskajām vajadzībām un kontekstam. Ievērojot šos norādījumus, jūs varat efektīvi izmantot useContext jaudu un veidot augstas veiktspējas React lietojumprogrammas, kas nodrošina izcilu lietotāja pieredzi.